<template>
  <div
    class="Lines"
    :style="{
      backgroundImage: backgroundImage,
      backgroundSize: `${config.lineType.width * style.height}px 100%`
    }"
  ></div>
</template>

<script>
  export default {
    props: {
      widget: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {
      style() {
        return this.widget.style;
      },
      config() {
        return this.widget.config;
      },
      backgroundImage() {
        return this.config.lineType.value.replace(/#000/g, this.config.lineColor);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .Lines {
    background-repeat: repeat-x;
  }
</style>
